<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <title>首页轮播 - 后台管理系统</title>
	    <meta name="renderer" content="webkit|ie-comp|ie-stand">
	    <meta name="apple-mobile-web-app-capable" content="yes">
	    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
	    <link rel="stylesheet" type="text/css" href="static/css/font-awesome.min.css"/>
	    <link rel="stylesheet" href="static/css/style.css">
	    <style>
	    .hotContent a{ cursor: pointer; }
	    </style>
	</head>
	<body>
		<div class="subnav">
			<a href="">首页</a> &gt; <a href="">系统管理</a> &gt; 首页轮播
		</div>
		
		<div class="main-inner">
			<div class="x-body">
				<div class="tablefilter">
					<div class="tablebutton">
						<a class="checkAll"><i class="fa fa-check"></i>全选</a>
						<a class="delete"><i class="fa fa-trash"></i>删除</a>
						<a class="dark">保存更改</a>
						<a class="tag_setOrd">test</a>
					</div>
				</div>
				<div class="lotteryhot">
					<div class="lotterylist">
						<table id="sort">
							<thead>
								<tr>
									<th>全选</th>
									<th>彩种名称</th>
									<th>新增日期</th>
									<th>拖动排序</th>
								</tr>
							</thead>
							<tbody>
							{loop $hotLotteryCurrRes as $k=>$v}
								<tr data-item="{$v['id']}" class="drag_module_main">
									<td class="index">
										<div class="no tableCheck">
											<input type="checkbox" name="lottery" value="{$v['id']}">
										</div>
									</td>
									<td>{$v['title']}</td>
									<td>{date("Y-m-d H:i:s",$v['inputtime'])}</td>
									<td><a class="fa fa-reorder"></a></td>
								</tr>
							{/loop}
							</tbody>
							</table>
					</div>
					<div class="selecthot">
						<h3>选择热门彩种</h3>
						<div class="hotContent">
							{loop $hotLotteryRes as $k=>$v}
								<a data-item="{$v['id']}" class="hot_{$v['id']}">{$v['title']}</a>
							{/loop}
						</div>
					</div>
				</div>
			</div>
		</div>		
	    <script src="static/js/jquery.min.js"></script>
	    <script src="static/js/jquery-ui.min.js"></script>
		<script>
		$(function(){
			$(".lotterylist table tr").map(function(){
				$(".hot_" + $(this).attr('data-item')).addClass('light disabled');
			})
			var hotArr = [];
			$(".hotContent a").on('click',function(){
				// if($(".lotterylist table tr").length > 10){
				// 	alert('最大只能选择10种');return;
				// }
				if($(this).hasClass('disabled'))return false;
				var id = $(this).attr('data-item');
				if($(this).hasClass('light')){
					var _index = $('.lotterylist table tr.add').index($(".hot"+id));
					hotArr.splice(parseInt(_index,10),1)
					$('.lotterylist table').find(".hot"+id).remove();
					$(this).removeClass('light');
				}else{
					var html = '<tr class="hot'+id+' add"><td><div class="no tableCheck"><input type="checkbox" /></div></td><td>'+$(this).html()+'</td><td>'+getNowFormatDate()+'</td><td><a class="fa fa-reorder"></a></td></tr>';
					$(this).addClass('light');
					hotArr.push(id);
					$('.lotterylist table').append(html);
				}
			});

			// 保存更新
			$(".dark").on('click',function(){
				if(!hotArr.length){
					alert('没有新的更新');return;
				}
				$.ajaxSetup({async:false});
				$.post("?m=system&c=lotteryhot&a=save",{ids:hotArr},function(res){
					res = eval('('+res+')');
					alert(res.msg);
					window.location.reload();
				});
			})

			// 全选
			var checkBtn = false;
			$(".checkAll").on('click',function(){
				if(!checkBtn){
					$("input[name=lottery]").prop("checked",true);
					checkBtn = true;
				}else{
					$("input[name=lottery]").prop("checked",false);
					checkBtn = false;
				}
			});

			// 删除
			$(".delete").on('click',function(){
				var ids = [];
				$("input[name=lottery]:checked").map(function(){
					ids.push($(this).val());
				});
				if(!ids.length){
					alert('当前没有操作的数据');return;
				}
				$.ajaxSetup({async:false});
				$.post("?m=system&c=lotteryhot&a=delete",{ids:ids},function(res){
					res = eval('('+res+')');
					alert(res.msg);
					window.location.reload();
				});
			})
		});
		function getNowFormatDate() {
	        var date = new Date();
	        var Y = date.getFullYear();
	        var m = date.getMonth() + 1;
	        var d = date.getDate();
	        var H = date.getHours();
	        var i = date.getMinutes();
	        var s = date.getSeconds();
	        if (m >= 1 && m <= 9) {
	            m = "0" + m;
	        }
	        if (d >= 0 && d <= 9) {
	            d = "0" + d;
	        }
	        if (H >= 1 && H <= 9) {
	            H = "0" + H;
	        }
	        if (i >= 1 && i <= 9) {
	            i = "0" + i;
	        }
	        if (s >= 1 && s <= 9) {
	            s = "0" + s;
	        }
	        return Y + '-' + m + '-' + d + ' ' + H + ':' + i + ':' + s;
	    }
	    
	    //拖拽表格排序
		$(document).ready(function(){
	        var fixHelperModified = function(e, tr) {
                var $originals = tr.children();
                var $helper = tr.clone();
                $helper.children().each(function(index) {
                    $(this).width($originals.eq(index).width())
                });
                return $helper;
           };
	       $("#sort tbody").sortable({
	            helper: fixHelperModified,
		        update:function(){
		        	setLottOrd();
		        }
	       }).disableSelection();
	    });

		$('.tag_setOrd').on('click', '', function (){
			setLottOrd();
		})
		
	    function setLottOrd(){
		    var ordData = [];
			$.each($('.tableCheck input[name="lottery"]'), function (i, v){
				ordData.push($(v).val());
			})
			$.ajaxSetup({async:false});
			param    = {'operation':'setOrd', 'ordData':ordData};
			var data = 'data=' + JSON.stringify(param);
			$.post('?m=json&c=lottery', data, function (res){
				console.log(res);
			}, 'json')
		}
		</script>		
	</body>
</html>
